<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        网页聊天
    </div>
    <!-- 主窗口区 -->
    <div class="login-container">
    
        <div class="login-dialog">
            <h3>登录</h3>
             <div class="row"> 
                <span>用户名</span>  
                <input type="text" id="username">
             </div>
             <div class="row">
                <span>密码</span>
                <input type="password" id="password">
             </div>
             <div class="row">
                <button id="submit" >登录</button>
             </div>
        </div>
    </div>
<!--    引入jQuery-->
    <script src="./js/jQuery.min.js"></script>
    <!-- 实现前后端交互的逻辑 -->
    <script>
        let submitButton = document.querySelector('#submit');
        
        submitButton.onclick = function(){
            //先获取输入框中的内容
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;
    
            if(username == ''||password==''){
                alert("当前输入的用户名或密码为空！");
                return;
            }
             // 发送ajax请求进行登录
        jQuery.ajax({
            url:'/login',
            type:'post',
            data:{
                username:username,
                password:password
            },
            success:function(body){
                //处理响应，body相当于响应user对象
                if(body&&body.userId>0){
                    alert("登录成功！");
                    //跳转到客户端主页面即聊天页面
                    location.assign('/client.html');
                }else{
                    alert("登录失败")
                }
            }
        });
        }
       
    </script>


</body>
</html>